<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>t1 </title>
 	<meta charset='UTF-8'>
	<style type='text/css'>
		div{ border:solid 1px red;margin:2px; }
	</style>
 	<script type='text/javascript' src='jquery/jquery-1.11.1.js'></script>
 	<script type='text/javascript'>
 		$(function(){
			
			//$('div').eq(2).css('background','#ff8000');//eq(元素对应索引)
			//$('div').eq(4).next(div/*限制查找*/).css('background','#ff8000');//查上级元素相同的下一个、必须是同级
			//$('div').eq(4).next().parent().css('background','#ff8000');//查父元素
			//$('#div').find('button').css('background','#ff8000');;//查容器里所有指定元素（无视层面）
			//$('#div').children('button').css('background','#ff8000');;//查容器里所有指定子元素
			//$('#div').children('button').parent().css('background','#ff8000');;//查容器里所有指定子元素的父元素
			$('#div').children('button').parent().next().next().css('background','#ff8000');;//查容器里所有指定子元素的父元素的下一个同级元素
			
			//$('[align=center]').css('background','#ff8000');;//属性选择器
			//$('div:odd').css('background','#ff8000');//伪对象选择器
			//$('div:even').css('background','#ff8000');//伪对象选择器
			/*$('div:even').click(function(){//伪对象选择器
				$(this).css('background','#ff8000');
			});*/
			/*$('div #but').click(function(){//元素对应事件/包含选择
				alert('hello world !');
			});
			$('#div>button').click(function(){//元素对应事件/子选择
				alert('hello world !');
			});*/
		});
 	</script>
 </head>
 <body>
 	<div id='div'>
	 	<button id='but'>按钮1</button>
	 	<button class='butt'>按钮2</button>
		<div>
			<button>按钮3</button>
		</div>
		<div>www</div>
		<div>www</div>
		<div>www</div>
		<div>www</div>
	</div>
	<br/>
	<div>hello world !</div>
	<div>hello world !</div>
	<div>hello world !</div>
	<div align='center'>hello world !</div>
	<div>hello world !</div>
	<div>hello world !</div>
	<div>hello world !</div>
	<div>hello world !</div>
 </body>
</html>
